<template>
    <div class="container row">
        <div v-for="(item,index) in goodlist" :key="index" >
            <img :src="'http://127.0.0.1:8000/static/upload/'+item.img" width="240" height="240" class="rounded-corners img-fluid">
            <tr>
                <td>{{item.title}}</td>
            </tr>
            <tr>
                <td> 价格{{item.price}}</td>
            </tr>
            <tr>
                <td>
                    <Button type="submit" @click="buy(item.title,item.price)">立即预定</Button>
                </td>
            </tr>
        </div>

            <Pagination @change="goodslist" v-model="pagination" layout="pager,jumper" ></Pagination>


    </div>
</template>

<script>
export default {
    data () {
        return {
            //购物车容器
            cartlist:[],
            //商品容器
             goodlist:[],
            //定义分页器变量
            pagination:{
                //当前页
                page:1,
                //一页展示多条数据
                size:3,
                //一共多少数据
                total:''
            }
            
        }
    },
    methods: {
        // 商品展示
        goodslist(){
             this.axios.get('http://127.0.0.1:8000/mylearn/goodlistview/',{params:{page:this.pagination.page,size:this.pagination.size}})
             .then(result=>{
                 console.log(result)
                this.goodlist=result.data.message
                this.pagination.total=result.data.count
                // console.log(localStorage.getItem('username'))
                //如果替换元素，因为返回的是一个列表，所以需要循环遍历取值修改
                for(let i=0;i<result.data.message.length;i++){
                    if(localStorage.getItem('username')){
                        result.data.message[i]['price']=result.data.message[i]['vip_price']
                        // result.data.message[i]['price']=result.data.message[i]['price']*0.1
                    }

                }
              
             })

        },
        //购买商品
        buy(title,price){
            //这里是一个 列表
            this.cartlist.push({'title':title,'price':price})         
            console.log('打印单个',this.cartlist)
            //里面只能存放字符串，所以需要强转字符串
            localStorage.setItem('cart',JSON.stringify(this.cartlist))
             this.$router.push('learnorder')
        }

    },
    mounted() {
        this.goodslist()
    },

}
</script>

<style>

</style>
定义了一个列表容器，将后端查询到的数据返回给前端，对商品列表赋值，然后循环点出来，
用的div标签循环，然后老样子，一个tr配一个td，因为没有登录要展示另一种价格，所以
再展示数据的时候可以对price重新赋值变成 vip_price，用到了循环取值的方法，因为
数据是很多个，所以需要循环，循环到第一个字典，然后取到price

购买商品的时候，定义号购物车容器，因为是锁定是购买，所以需要传一下指定的商品名称，
然后将 商品名称 push 添加到商品容器中，localStorage里面只能存放字符串，这个时候
需要将列表转化成字符串，存进去。点击立即预定之后，跳转到提交页面。
因为没用带参数跳转，所以用的localStorage

分页操作的时候，需要将后端的一共多少条数据的count赋值给前端的total,当前页，
和一页展示多少条数据再前端就给写死